<script setup lang="ts">
import videoList from "~/mock/video";
import Videos from "./Videos.vue";
import VideosM from "./Videos.m.vue";

const visible = ref(false);
const selected = ref();

function toPlayVideo(e: any) {
  selected.value = e;
  visible.value = true;
}

watch(visible, (val) => {
  if (!val) {
    selected.value = undefined;
  }
});
</script>

<template>
  <DeviceRender>
    <Videos :list="videoList" @select="toPlayVideo" />
    <template #mobile>
      <VideosM :list="videoList" @select="toPlayVideo" />
    </template>
  </DeviceRender>

  <Modal v-model="visible">
    <video
      class="max-md:w-full md:max-w-80vw max-h-75vh"
      :src="selected?.url"
      controls
      autoplay
    />
  </Modal>
</template>
